<template>
  <div class="transition-wrap">
    <h1>切换</h1>
    <button>
      <router-link to="/transition/a">切换到a</router-link>
    </button>
    <button>
      <router-link to="/transition/b">切换到b</router-link>
    </button>
    <button>
      <!-- <router-link to="/transition/c" target="_blank">切换到c</router-link> -->
      <router-link to="/transition/c">切换到c</router-link>
    </button>
    <!-- <transition name="fade">
      <router-view class="wrap"></router-view>
    </transition> -->
    <transition :name="transitionName">
      <router-view class="child-view"/>
      <!-- <router-view class="child-view"></router-view> -->
    </transition>
  </div>
</template>

<script>
export default {
  data () {
    return {
      transitionName: ''
    }
  },
  watch: {
    '$route' (to, from) {
      let toDepth = to.path.split('/').length // 根据/将path分为数组
      let fromDepth = from.path.split('/').length
      this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
    }
  }
  // beforeRouteUpdate (to, from, next) {
  //   setTimeout(() => {
  //     console.log('index')
  //     next()
  //   }, 3000)
  // }
}
</script>

<style lang="scss" scoped>
  .transition-wrap {
    width: 400px;
    height: 1000px;
  }
  .wrap {
    width: 400px;
    height: 400px;
  }
  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
    color: red;
  }
  .child-view{
    position: absolute;
    width: 400px;
    height: 300px;
    transition: all .5s cubic-bezier(.55,0,.1,1);
  }
  .slide-right-leave-active,
  .slide-left-enter {
    opacity: 0;
    transform: translate(30px, 0);
  }

  .slide-left-leave-active,
  .slide-right-enter {
    opacity: 0;
    transform: translate(-30px, 0);
  }
</style>
